<!-- 实物奖品详情 -->
<template>
  <a-modal
    v-model:visible="vdata.visible"
    :title="'卡券奖品详情'"
    :body-style="{ paddingBottom: '80px' }"
    :maskClosable="false"
    width="40%" 
    :close="onClose"
    :footer="null"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="卡券名称">
            {{ vdata.detailData.couponName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="卡券数量">
            {{ vdata.detailData.couponNum ==0 ?'--':vdata.detailData.couponNum }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="卡券面额（元）">
            {{ vdata.detailData.couponPrice / 100 ==0 ?'--': vdata.detailData.couponPrice / 100 }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="活动预算（元）">
            {{ vdata.detailData.couponAmount / 100==0?'--': vdata.detailData.couponAmount / 100 }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="批次号">
            {{ vdata.detailData.batchNo || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="活动类型">
            <span v-if="vdata.detailData.couponType == 1">支付宝满减活动</span>
            <span v-if="vdata.detailData.couponType == 2">支付宝随机减活动</span>
            <span v-if="vdata.detailData.couponType == 3">微信满减活动</span>
            <span v-if="vdata.detailData.couponType == 4">微信随机减活动</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="参数内容">
            {{ vdata.detailData.couponJson }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="状态">
            <span v-if="vdata.detailData.state == 0">草稿</span>
            <span v-if="vdata.detailData.state == 1">下线</span>
            <span v-if="vdata.detailData.state == 2">上线</span>
            <span v-if="vdata.detailData.state == 3">已过期</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="可用开始时间">
            {{ vdata.detailData.startTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="可用结束时间">
            {{ vdata.detailData.endTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="有效天数">
            {{ vdata.detailData.availableDays || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="机构号">
            {{ vdata.detailData.agentNo || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="卡券是否需要网点激活">
            <span>{{ vdata.detailData.awardSetting.isNeedActivate ==0 ?'否':'是' }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="卡券1：1图片">
            <a-image :src="vdata.detailData['couponImgSquare']" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="卡券16：9图片">
            <a-image :src="vdata.detailData['couponImgRectangle']" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="创建者ID">
            {{ vdata.detailData.createdUid }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <a-col v-if="vdata.detailData.payConfig" :sm="24">
        <a-descriptions>
          <a-descriptions-item label="出资方配置活动信息">
            {{ vdata.detailData.payConfig || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.apiJson" :sm="24">
        <a-descriptions>
          <a-descriptions-item label="回参">
            {{ vdata.detailData.apiJson || '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="可核销商户清单">
            <template v-if="vdata.detailData.awardMchList?.length">
              <template v-for="(item,index) in vdata.detailData.awardMchList" :key="index">
                {{ item.mchNo }}，
              </template>
            </template>
            <template v-else>--</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="可兑换网点(已兑/总数)">
            <template v-if="vdata.detailData.agents?.length">
              <template v-for="(item,index) in vdata.detailData.agents" :key="index">{{ item.agentNo }}({{ item.numConsume + '/' +item.num }})，</template>
            </template>
            <template v-else>--</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="备注">
            <a-textarea v-model:value="vdata.detailData['remark']" :rows="3" disabled="disabled" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang="ts" setup>
import {$getCouponDetail}from '@/api/awardMange/coupon/index'
import { reactive } from 'vue'
import { useUserStore } from '@/store/modules/user'

const vdata: any = reactive({
  btnLoading: false,
  detailData: {}, // 数据对象
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
})

/**
 * 进度条
 * @param isShowGlobalLoadingVal 
 */
function myGlobalLoadingFunc(isShowGlobalLoadingVal) {
  useUserStore().setGlobalLoading(isShowGlobalLoadingVal)
}

async function show(couponId) { // 弹层打开事件
  // 卡券详情数据
  await getCouponDetail(couponId)
  vdata.visible = true
}
// 请求卡券详情数据
async function getCouponDetail(couponId){
  try {
    myGlobalLoadingFunc(true)
    const res = await $getCouponDetail({ couponId })
    
    vdata.detailData = res
  } finally {
    myGlobalLoadingFunc(false)
  }
}
function onClose() {
  vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>

<style lang="less" scoped>
:deep(img){
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>
